<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="left">
      <div class="form-list flex">
        <div class="form-lidt-l box-radius">
          <div class="form-list-title">重鉴别设置</div>

          <el-form-item label="尝试鉴别次数" prop="validPwdNum">
            <el-input-number
              class="marg-rt"
              v-model="form.validPwdNum"
              controls-position="right"
              :min="1"
              :max="5"
             ></el-input-number
            >次
            <el-tooltip content="允许口令尝试次数，最大值为5次" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
            <span>(最大值为5次)</span>
          </el-form-item>
          <el-form-item label="鉴别失败锁定的时间" prop="validLockTime">
            <el-input-number
              class="marg-rt"
              v-model="form.validLockTime"
              controls-position="right"
              :min="15"
              :max="1440"
              maxlength="10"></el-input-number
            >分钟
            <el-tooltip content="鉴别失败锁定时间,最小值为15分钟" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
            <span>(最小值为15分钟)</span>
          </el-form-item>
        </div>
        <div class="form-lidt-l box-radius">
          <div class="form-list-title">超时重鉴别设置</div>

          <el-form-item label="超时重鉴别时间" prop="activityTimeout">
            <el-input-number
              class="marg-rt"
              v-model="form.activityTimeout"
              controls-position="right"
              :min="1"
              :max="30"></el-input-number
            >分钟
            <el-tooltip content="超时重鉴别时间，最大值为30分钟" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
            <span>(最大值为30分钟)</span>
          </el-form-item>
        </div>
      </div>
      <div class="form-list">
        <div class="box-radius">
          <div class="form-list-title">口令设置</div>
          <el-form-item label="当前系统密级" prop="securityLevel">
            <el-select v-model="form.securityLevel" placeholder="请选择" @change="handleSecurityLevel">
              <el-option v-for="item in securityLevelOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-alert
            class="alert-box"
            :closable="false"
            :title="
              form.securityLevel == '1'
                ? '按照保密管理规范要求，机密级信息系统，应采用IC卡或USBkey与口令相结合的方式，且口令长度不少于4位;如果仅使用口令方式,口令长度不少于10位，更换周期不超过7天。'
                : `按照保密管理规范要求，${form.securityLevel==2?'秘密':form.securityLevel==3?'内部':'公开'}级信息系统，口令长度不少于8位，更换周期不超过1个月。`
            "
            type="warning"
            show-icon>
          </el-alert>
           <el-row style="margin-bottom:20px;" v-if="form.securityLevel==1">
            <el-button :class="[active == '0' ? 'active' : '']" @click="handleChange('0')">单口令</el-button>
            <el-button :class="[active == '1' ? 'active' : '']" @click="handleChange('1')">组合口令</el-button>
          </el-row>
          <el-form-item label="口令复杂度" prop="passwordLength">
            <el-input class="marg-rt" placeholder="请输入内容" v-model.number="form.passwordLength" :min="form.securityLevel==1?10:8"
              :max="16" maxlength="2">
              <template slot="append">位</template>
            </el-input>
            <span>至少是大小写英文字母、数字和特殊字符中两者以上的组合</span>
            <el-tooltip
              :content="
                form.securityLevel == '1'
                  ?'按照保密管理规范要求，机密级信息系统，应采用IC卡或USBkey与口令相结合的方式，且口令长度不少于4位;如果仅使用口令方式,口令长度不少于10位，更换周期不超过7天。':
                  `按照保密管理规范要求，${form.securityLevel==2?'秘密':form.securityLevel==3?'内部':'公开'}级信息系统，口令长度不少于8位，更换周期不超过1个月。`
              "
              placement="top"
              effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="" prop="usbKeyLength" v-if="active == '1' && form.securityLevel=='1' " style="margin-top: 20px">
            <span class="marg-rt">USB key口令长度设置应不少于</span>
            <el-input size="small" placeholder="请输入内容" v-model.number="form.usbKeyLength" :min="4" :max="16" maxlength="2">
              <template slot="append">位</template>
            </el-input>
            <el-tooltip content="USB key口令长度" placement="top" effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="口令修改间隔时间" prop="keyModifyInterval">
            <el-input-number
              class="marg-rt"
              v-model="form.keyModifyInterval"
              controls-position="right"
              :min="1"
              :max="form.securityLevel == '1' ? 7 : 30"></el-input-number
            >天
            <el-tooltip
              :content="
                form.securityLevel == '2'
                  ? '间隔多长时间进行口令修改,最大值为30天'
                  : '间隔多长时间进行口令修改,最大值为7天'
              "
              placement="top"
              effect="light">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="首次登录更改口令" prop="">
            <!-- <el-select v-model="form.modifyPwdFirst" placeholder="请选择">
              <el-option v-for="item in changePassworOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-switch v-model="form.modifyPwdFirst"> </el-switch>
          </el-form-item>
        </div>
      </div>
      <div class="form-list">
        <div class="box-radius">
          <div class="form-list-title">登录管理访问控制</div>
          <el-form-item label="管理IP地址">
            <el-input
              type="textarea"
              v-model="form.allowedIp"
              placeholder="多个ip地址通过逗号间隔，如:192.168.1.1,192.168.1.2"
              maxlength="500"
              :rows="8"
              :cols="10"></el-input>
              <el-tooltip content="多个ip地址通过逗号间隔，如:192.168.1.1,192.168.1.2" placement="top" effect="light" style="vertical-align:top;">
              <i class="el-icon-question el-icon"></i>
            </el-tooltip>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm('form')">保存</el-button>
      <!-- <el-button @click="resetForm('form')">取消</el-button> -->
    </div>
  </div>
</template>

<script>
import { updateConfig, getConfig } from '@/api/safeSystem/index.js'
export default {
  data() {
    return {
      form: {},
      rules: {
        validPwdNum: [{ required: true, message: '请输入尝试鉴别次数', trigger: 'change' }],
        validLockTime: [{ required: true, message: '请输入鉴别失败锁定时间', trigger: 'change' }],
        activityTimeout: [{ required: true, message: '请输入超时重鉴别时间', trigger: 'change' }],
        securityLevel: [{ required: true, message: '请输入尝当前系统密级', trigger: 'change' }],
        passwordLength: [
          { required: true, message: '请输入口令复杂度', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' },
        ],
        keyModifyInterval: [{ required: true, message: '请输入口令修改间隔时间', trigger: 'change' }],
        usbKeyLength: [{ pattern: /^[0-9]+$/, message: '只能输入数字' }],
      },
      securityLevelOptions: [
        { label: '机密', value: '1' },
        { label: '秘密', value: '2' },
        { label: '内部', value: '3' },
        { label: '公开', value: '4' },
      ],
      changePassworOptions: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
      active:0
    }
  },
  mounted() {
    this.getConfigData()
  },
  methods: {
    // 切换单口令、组合口令
    handleChange(val){
      this.active=val
    },
    //  切换当前系统密级
    handleSecurityLevel(val){
      if(val==1){
        this.form.passwordLength=10
        this.form.keyModifyInterval=7;
      }else{
        this.form.passwordLength=8
      }
    },
    /** 更新配置 */
    getConfigData() {
      getConfig().then((res) => {
        this.form = res
        if(res.securityLevel=='0'){
          this.form.securityLevel='1';
          this.active='1'
        }else if(res.securityLevel=='1'){
          this.active='0'
        }
      })
    },
    /**
     *  表单提交
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let submitForm=JSON.parse(JSON.stringify(this.form))
          if(this.form.securityLevel==1 && this.active=='1'){
            submitForm.securityLevel='0'
          }
          updateConfig(submitForm).then((res) => {
            this.$message.success('保存成功')
            this.getConfigData()
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
    margin-left: -10px;
    margin-right: 4px;
  }
::v-deep .el-input-group--append .el-input__inner{
  padding: 0 0 0 20px !important;
}
::v-deep .el-textarea{
  width:42%;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}

::v-deep .el-alert__icon {
  color: #ff3535;
}

::v-deep .el-input-group--append {
  width: 200px;
}
.dark-theme .container,.dark-theme .container .form-list{
  background: transparent !important;
}
.dark-theme{
  .container .form-list .box-radius{
    background:rgba(59,139,255,.1) !important;
    color:#fff !important;
  }
  .el-tooltip{
    color:#fff !important;
  }
 
}
.container {
  height: 100%;
  background: #eef0f5;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  .el-form{
    flex:1 !important;
    overflow:auto;
  }
  .marg-rt {
    margin-right: 8px;
  }
  .footer {
    text-align: right;
    padding:10px 20px;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  .form-list-title {
    margin-bottom: 20px;
  }

  .active {
    background: #4b6eef;
    color: #fff;
  }

  .el-icon {
    margin: 0 5px 0 5px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.45);
    vertical-align: middle;
  }

  .form-list {
    background: #eef0f5;
    margin-bottom:20px;
    &:nth-last-child(1){
      margin-bottom:0 !important;
    }
    .box-radius {
      padding: 30px;
      border-radius: 4px;
      background: #fff;
    }

    .alert-box {
      margin: 20px 0;
      background: #fff1f0;
      border: 1px solid rgba(255, 163, 158, 1);
      color: rgba(0, 0, 0, 0.65);
    }

    .form-lidt-l {
      width: calc(50% - 10px);
    }
  }
}
</style>
